<template>
  <el-table :data="tableData" border style="width: 100%" size="mini" class="bsMonth" :height="height">
    <el-table-column prop="date" label="日期" width="100"></el-table-column>
    <el-table-column prop="spot9" label="9点" width="110">
        <template slot-scope="scope">
            <div v-for="item in scope.row.spot9">
                <p class="col2" v-if="item.status==0" ></p>
                <p class="col3" v-if="item.status==2"></p>
                <el-tooltip class="item" effect="dark" size='mini' v-if="item.status==1" :content="item.orderJson" placement="bottom-start">
                    <p class="col1"></p>
                </el-tooltip>
            </div>
        </template>
    </el-table-column>
    <el-table-column prop="spot10" label="10点" width="110">
        <template slot-scope="scope">
            <div v-for="item in scope.row.spot10">
                <p class="col2" v-if="item.status==0" ></p>
                <p class="col3" v-if="item.status==2"></p>
                <el-tooltip class="item" effect="dark" size='mini' v-if="item.status==1" :content="item.orderJson" placement="bottom-start">
                    <p class="col1"></p>
                </el-tooltip>
            </div>
        </template>
    </el-table-column>
    <el-table-column prop="spot11" label="11点" width="110">
        <template slot-scope="scope">
            <div v-for="item in scope.row.spot11">
                <p class="col2" v-if="item.status==0" ></p>
                <p class="col3" v-if="item.status==2"></p>
                <el-tooltip class="item" effect="dark" size='mini' v-if="item.status==1" :content="item.orderJson" placement="bottom-start">
                    <p class="col1"></p>
                </el-tooltip>
            </div>
        </template>
    </el-table-column>
    <el-table-column prop="spot12" label="12点" width="110">
        <template slot-scope="scope">
            <div v-for="item in scope.row.spot12">
                <p class="col2" v-if="item.status==0" ></p>
                <p class="col3" v-if="item.status==2"></p>
                <el-tooltip class="item" effect="dark" size='mini' v-if="item.status==1" :content="item.orderJson" placement="bottom-start">
                    <p class="col1"></p>
                </el-tooltip>
            </div>
        </template>
    </el-table-column>
    <el-table-column prop="spot13" label="13点" width="110">
        <template slot-scope="scope">
            <div v-for="item in scope.row.spot13">
                <p class="col2" v-if="item.status==0" ></p>
                <p class="col3" v-if="item.status==2"></p>
                <el-tooltip class="item" effect="dark" size='mini' v-if="item.status==1" :content="item.orderJson" placement="bottom-start">
                    <p class="col1"></p>
                </el-tooltip>
            </div>
        </template>
    </el-table-column>
    <el-table-column prop="spot14" label="14点" width="110">
        <template slot-scope="scope">
            <div v-for="item in scope.row.spot14">
                <p class="col2" v-if="item.status==0" ></p>
                <p class="col3" v-if="item.status==2"></p>
                <el-tooltip class="item" effect="dark" size='mini' v-if="item.status==1" :content="item.orderJson" placement="bottom-start">
                    <p class="col1"></p>
                </el-tooltip>
            </div>
        </template>
    </el-table-column>
    <el-table-column prop="spot15" label="15点" width="110">
        <template slot-scope="scope">
            <div v-for="item in scope.row.spot15">
                <p class="col2" v-if="item.status==0" ></p>
                <p class="col3" v-if="item.status==2"></p>
                <el-tooltip class="item" effect="dark" size='mini' v-if="item.status==1" :content="item.orderJson" placement="bottom-start">
                    <p class="col1"></p>
                </el-tooltip>
            </div>
        </template>
    </el-table-column>
    <el-table-column prop="spot16" label="16点" width="110">
        <template slot-scope="scope">
            <div v-for="item in scope.row.spot16">
                <p class="col2" v-if="item.status==0" ></p>
                <p class="col3" v-if="item.status==2"></p>
                <el-tooltip class="item" effect="dark" size='mini' v-if="item.status==1" :content="item.orderJson" placement="bottom-start">
                    <p class="col1"></p>
                </el-tooltip>
            </div>
        </template>
    </el-table-column>
    <el-table-column prop="spot17" label="17点" width="110">
        <template slot-scope="scope">
            <div v-for="item in scope.row.spot17">
                <p class="col2" v-if="item.status==0" ></p>
                <p class="col3" v-if="item.status==2"></p>
                <el-tooltip class="item" effect="dark" size='mini' v-if="item.status==1" :content="item.orderJson" placement="bottom-start">
                    <p class="col1"></p>
                </el-tooltip>
            </div>
        </template>
    </el-table-column>
    <el-table-column  label=""></el-table-column>
  </el-table>
</template>
<script>
import { request } from "../../assets/request.js";
export default {
  data() {
    return {
        height: window.innerHeight - (window.innerWidth <1366? 347 :283),//计算表格高度
        tableData: []
    };
  },
  created(){
      this.$root.$on('listMonth',obj=>{
          console.log(obj)
          this.selsctList(obj)
      })
  },
  methods:{
      selsctList(obj){ //排期列表请求  （日排期）
            let url = "admin/work/employee";
            let that=this   //解决this指向问题
            request.ajaxGet({
                url,
                that,
                params:obj,
                fn(res){
                    console.log(res)
                    for(let i in res){ //将数据转换成 表格型数据
                        res[i].dateList=that.group(res[i].workList,2) // 把一个数组按照一定长度分割成若干数组
                        res[i].spot9=res[i].dateList[0]  //9点的 数据
                        res[i].spot10=res[i].dateList[1]
                        res[i].spot11=res[i].dateList[2]
                        res[i].spot12=res[i].dateList[3]
                        res[i].spot13=res[i].dateList[4]
                        res[i].spot14=res[i].dateList[5]
                        res[i].spot15=res[i].dateList[6]
                        res[i].spot16=res[i].dateList[7]
                        res[i].spot17=res[i].dateList[8]
                    }
                    that.tableData=res
                }
            })
        },
       // 把一个数组按照一定长度分割成若干数组
        group(array, subGroupLength) { //要切割的数组 要切割的长度
            let index = 0;
            let newArray = [];
            while(index < array.length) {
                newArray.push(array.slice(index, index += subGroupLength));
            }
            return newArray;
        }
  }
};
</script>
<style lang="less" scoped>
.bsMonth{
    p{
        height: 25px;
        width: 46%;
        float: left;
        margin: 0 2%;
    }
    .col1{
        background: #ff3300;
    }
    .col2{
        background: #00cc99;
    }
    .col3{
        background: #999;
    }
}
</style>